<template>
  <!-- <StatusBar></StatusBar> -->
  <view class="bg">
    <image src="../../static/test2.png" mode="" class="img"></image>
  </view>

  <view class="main">
    <!-- <image src="../../static/huanghelou.png" mode="" class="main_img"></image> -->
    <view class="parent">
      <view class="div1" @click="toRelease">
        <image src="../../static/huanghelou.png" class="icon1"></image>
        <view style="font-size: 80rpx; font-weight: 800; margin-left: 60rpx">
          足迹
        </view>
        <view style="font-size: 80rpx; font-weight: 800; margin-left: 110rpx">
          打卡
        </view>
      </view>
      <view class="div2" @click="toAI">
        <image src="../../static/mainIcon2.svg" class="icon2"></image>
        <view style="font-size: 40rpx; font-weight: 800; margin-left: 40rpx">
          关注动态
        </view>
      </view>
      <view class="div3" @click="toAI">
        <image src="../../static/mainIcon3.svg" class="icon3"></image>
        <view style="font-size: 40rpx; font-weight: 800; margin-left: 40rpx">
          AI导游
        </view>
      </view>
    </view>
    <!-- <view class="main_btn_box">
			<image src="../../static/huanghelou.png" mode="" class="main_btn_img"></image>
			<button class="main_btn" @click="toRelease">
				足迹打卡
			</button>
		</view>

		<view class="main_btn_box">
			<image src="../../static/dayanta.png" mode="" class="main_btn_img"></image>
			<button class="main_btn" @click="toAI">
				关注动态
			</button>
		</view>

		<view class="main_btn_box">
			<image src="../../static/jiefangbei.png" mode="" class="main_btn_img"></image>
			<button class="main_btn" @click="toAI">
				AI导游
			</button>
		</view> -->

    <!-- <button @click="toLogin">测试登录</button> -->
  </view>
</template>

<script setup lang="ts">
const toAI = () => {
  uni.navigateTo({
    url: '/pages/chat/chat',
  });
};

const toRelease = () => {
  uni.navigateTo({
    url: '/pages/release/release',
  });
};
const toLogin = () => {
  uni.clearStorageSync();
};
</script>

<style scoped>
.bg {
  width: 100%;
  height: 200px;
  /* background: url('../../static/test2.png'); */
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
}

.img {
  width: 100%;
  height: 100%;
  border-bottom-left-radius: 40px;
  border-bottom-right-radius: 40px;
}

.main_btn {
  width: 80%;
  background: #5f92ff;
  background: -webkit-linear-gradient(
    to right,
    #5f92ff 0%,
    #5f7eff 50%,
    #4f5baf 100%
  );
  background: linear-gradient(to right, #5f92ff 0%, #5f7eff 50%, #4f5baf 100%);
  border: none;
  color: #fff;
  padding: 10px 20px;
  border-radius: 30px;
  font-size: 1em;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  transition: all 0.3s ease;
  margin-bottom: 50px;
}

.main {
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  margin-top: 50px;
}

.main_img {
  width: 10%;
}

.main_btn_box {
  font-size: 20px;
  display: flex;
}

.main_btn_img {
  height: 70px;
  width: 70px;
  position: absolute;

  left: 35px;
  z-index: 999;
}

.parent {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  width: 90%;
  margin: 0 auto;
}

.div1 {
  background-color: #0ccbff;
  color: #eeeeee;
  padding-top: 30px;
  padding-bottom: 20px;
  border-radius: 10px;
  grid-area: 1 / 1 / 3 / 2;
}

.div2 {
  padding-top: 10px;
  padding-bottom: 20px;
  color: #eeeeee;
  background-color: #4797ff;
  border-radius: 10px;
  grid-area: 1 / 2 / 2 / 3;
}

.div3 {
  padding-top: 10px;
  padding-bottom: 20px;
  color: #ffffff;
  background-color: #94d6ff;
  border-radius: 10px;
  grid-area: 2 / 2 / 3 / 3;
}

.icon1 {
  width: 250rpx;
  height: 250rpx;
  margin-left: 15rpx;
}

.icon2 {
  width: 180rpx;
  height: 180rpx;
  margin-left: 100rpx;
}

.icon3 {
  width: 180rpx;
  height: 180rpx;
  margin-left: 100rpx;
}
</style>
